<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title>网易新闻</title>

		<script src="js/angular.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="css/flexslider.css" />
		<script src="js/jquery-3.0.0.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="js/jquery.flexslider-min.js"></script>
		<link rel="stylesheet" type="text/css" href="css/app.css" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/icons-extra.css" />
		<style type="text/css">
			.mui-control-content {
				background-color: white;
				min-height: 215px;
			}
			
			.mui-control-content .mui-loading {
				margin-top: 50px;
			}
			
			.homePage_ul {
				list-style: none;
				margin: 0px;
				padding: 10px 10px;
			}
			
			.homePage_ul img {
				width: 35%;
				height: 15%;
			}
			
			body {
				position: relative;
			}
			
			.header_nav_title {
				position: fixed;
				z-index: 1000000;
				width: 100%;
				height: 44px;
				background-color: rgb(224, 48, 48);
				text-align: center;
				padding: 4px 0 0 0;
			}
			
			#header_nav_img {
				position: absolute;
				top: 3px;
				left: 1%;
			}
			.mui-slider-item h5 {
				font-size: 16px;
				font-weight: lighter;
				line-height: 30px;
				background-color: black;
				opacity: 0.5;
				width: 100%;
				height: 30px;
				color: lightgray;
				position: absolute;
				bottom: -5px;
				left: 5px;
			}
			
			.homePage_a_span {
				width: 62.908213%;
				float: right;
			}
			
			.replayCount_div {
				line-height: 15px;
				color: gray;
				font-weight: lighter;
				font-size: 12px;
				background-color: lightgray;
				border: 1px solid lightgray;
				border-radius: 8px;
				position: absolute;
				right: 5px;
				bottom: 7px;
			}
			
			.tabber_header_nav_title {
				position: absolute;
				top: 50%;
				left: 50%;
				margin-top: -15px;
				margin-left: -45px;
				background-color: white;
				color: rgb(224, 48, 48);
				line-height: 30px;
				width: 90px;
				height: 30px;
				border-radius: 50px;
				border: 1px solid rgb(255, 245, 245);
			}
			.zhan_di_fang{
				width: 100%;
				height: 44px;
			}
			.tabber2_a_span{
				color: white;
				position: absolute;
				bottom: 40px;
				left: 15px;
			}
			.roomId_div{
				color: white;
				width: 103px;
				font-size: 12px;
				position: absolute;
				bottom: 10px;
				left: 15px;
			}
			.yuGao{
				/*float: left;*/
				margin: 0 auto;
				width: 95%;
				height: 30px;
				background-color: white;
				position: absolute;
				top: -7px;
				left: 10px;
			}
			.yuGao span{
				
				line-height: 35px;
				color: dodgerblue;
				font-weight: lighter;
			}
			.yugao_span{
				position: relative;
				height: 20px;
				margin-top: 10px;
				overflow: hidden;
			}
		</style>
	</head>

	<body ng-app="myApp">
		<nav class="mui-bar mui-bar-tab">
			<a id="buBianSe" class="mui-tab-item mui-active" href="#tabbar">
				<span class="mui-icon-extra mui-icon-extra-dictionary"></span>
				<span style="font-size: 12px;" class="mui-tab-label">新闻</span>
			</a>
			<a id="bianSe" class="mui-tab-item" href="#tabbar-with-chat">
				<span class="mui-icon-extra mui-icon-extra-computer"></span>
				<span style="font-size: 12px;" class="mui-tab-label">直播</span>
			</a>
			<a class="mui-tab-item" href="#tabbar-with-contact">
				<span class="mui-icon-extra mui-icon-extra-topic"></span>
				<span class="mui-tab-label" style="font-size: 12px;">话题</span>
			</a>
			<a class="mui-tab-item" href="#tabbar-with-map">
				<span class="mui-icon-extra mui-icon-extra-peoples"></span>
				<span class="mui-tab-label" style="font-size: 12px;">设置</span>
			</a>
		</nav>
		<!--最大的div------------------------------------------------------------------------------->
		<div class="mui-content">
			<!--tabbar1-->
			<div id="tabbar" class="mui-control-content mui-active">
				<!--居中头条img-------------------------------------------------------------------->
				<div class="header_nav_title">
					<img style="width: 90px; height: 35px;" src="img/5CF4337F6A64D66F9A95AD39B217B42A.png" />
					<a class="mui-tab-item" href="#tabbar-with-chat">
						<!--直播img---------------------------------------------------------------------------------->
						<div id="header_nav_img">
							<img style="width: 50px; height: 40px;" src="img/zhibo.png" />
						</div>
					</a>
				</div>
				<!---页面滚动------------------------------------------------------------------------>
				<div class="mui-content">
					<div id="slider" class="mui-slider">
						<!--顶部div----------头条-----------精选-----------娱乐-----------体育-----------军事-----------历史-------->
						<div style="background-color: lightgray; position: fixed;top: 44px; left: 0; z-index: 1;" id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
							<a class="mui-control-item" href="#item1mobile">
								头条
							</a>
							<a class="mui-control-item" href="#item2mobile">
								精选
							</a>
							<a class="mui-control-item" href="#item3mobile">
								娱乐
							</a>
							<a class="mui-control-item" href="#item4mobile">
								体育
							</a>
							<a class="mui-control-item" href="#item5mobile">
								军事
							</a>
							<a class="mui-control-item" href="#item6mobile">
								历史
							</a>
						</div>
						<!--<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-4"></div>-->
						<div class="mui-slider-group" style="margin-top: 73px;">
							<!---头条------------------------------------------------------------------------------------------>
							<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
								<div id="slider" class="mui-slider" ng-controller="headCon">
									<div class="mui-slider-group mui-slider-loop">
										<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
										<div class="mui-slider-item mui-slider-item-duplicate">
											<a href="#">
												<img ng-src="{{first.imgsrc}}">
											</a>
										</div>
										<!-- 第一张 -->
										<div class="mui-slider-item" ng-repeat="item in headArr">
											<a href="#">
												<img ng-src="{{item.imgsrc}}">
												<h5>{{item.title}}</h5>
											</a>
										</div>

										<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
										<div class="mui-slider-item mui-slider-item-duplicate">
											<a href="#">
												<img ng-src="{{last.imgsrc}}">
											</a>
										</div>
									</div>
									<div class="mui-slider-indicator">
										<div ng-class="{true:'mui-indicator mui-active', false:'mui-indicator'}[$index == 0]" ng-repeat="item in headArr track by $index"></div>
									</div>
								</div>
								<ul class="homePage_ul" ng-controller="homePageCon">
									<li style="position:relative; border-bottom: 1px solid gainsboro; margin-top: 5px;" ng-repeat="item in arr">
										<a style="color: black;" ng-href="{{item.url}}">
											<img style="width: 33.091787%; height: 13.994565%;" ng-src="{{item.imgsrc}}" />
											<div class="homePage_a_span">
												<span>{{item.title}}</span>
											</div>
											<div class="replayCount_div">
												<span>{{item.replyCount}}</span>
												<span>跟帖</span>
											</div>
										</a>
									</li>
								</ul>
							</div>
							<!--精选------------------------------------------------------------------------------------------->
							<div id="item2mobile" class="mui-slider-item mui-control-content">
								<div id="slider" class="mui-slider" ng-controller="headCon2">
									<div class="mui-slider-group mui-slider-loop">
										<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
										<div class="mui-slider-item mui-slider-item-duplicate">
											<a href="#">
												<img ng-src="{{first.imgsrc}}">
											</a>
										</div>
										<!-- 第一张 -->
										<div class="mui-slider-item" ng-repeat="item2 in headArr2">
											<a href="#">
												<img ng-src="{{item2.imgsrc}}">
												<h5>{{item2.title}}</h5>
											</a>
										</div>

										<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
										<div class="mui-slider-item mui-slider-item-duplicate">
											<a href="#">
												<img ng-src="{{last.imgsrc}}">
											</a>
										</div>
									</div>
									<div class="mui-slider-indicator">
										<div ng-class="{true:'mui-indicator mui-active', false:'mui-indicator'}[$index == 0]" ng-repeat="item2 in headArr2 track by $index"></div>
									</div>
								</div>
								<ul class="homePage_ul" ng-controller="homePageCon2">
									<li style="position:relative; border-bottom: 1px solid gainsboro; margin-top: 5px;" ng-repeat="item2 in arr2">
										<a style="color: black;" ng-href="{{item2.url}}">
											<img style="width: 33.091787%; height: 13.994565%;" ng-src="{{item2.imgsrc}}" />
											<div class="homePage_a_span">
												<span>{{item2.title}}</span>
											</div>
											<div class="replayCount_div">
												<span>{{item2.replyCount}}</span>
												<span>跟帖</span>
											</div>
										</a>
									</li>
								</ul>
							</div>
							<!--娱乐----------------------------------------------------------------------------------------------->
							<div id="item3mobile" class="mui-slider-item mui-control-content">
								<div id="slider" class="mui-slider" ng-controller="headCon3">
									<div class="mui-slider-group mui-slider-loop">
										<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
										<div class="mui-slider-item mui-slider-item-duplicate">
											<a href="#">
												<img ng-src="{{first.imgsrc}}">
											</a>
										</div>
										<!-- 第一张 -->
										<div class="mui-slider-item" ng-repeat="item3 in headArr3">
											<a href="#">
												<img ng-src="{{item3.imgsrc}}">
												<h5>{{item3.title}}</h5>
											</a>
										</div>

										<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
										<div class="mui-slider-item mui-slider-item-duplicate">
											<a href="#">
												<img ng-src="{{last.imgsrc}}">
											</a>
										</div>
									</div>
									<div class="mui-slider-indicator">
										<div ng-class="{true:'mui-indicator mui-active', false:'mui-indicator'}[$index == 0]" ng-repeat="item3 in headArr3 track by $index"></div>
									</div>
								</div>
								<ul class="homePage_ul" ng-controller="homePageCon3">
									<li style="position:relative; border-bottom: 1px solid gainsboro; margin-top: 5px;" ng-repeat="item3 in arr3">
										<a style="color: black;" ng-href="{{item3.url}}">
											<img style="width: 33.091787%; height: 13.994565%;" ng-src="{{item3.imgsrc}}" />
											<div class="homePage_a_span">
												<span>{{item3.title}}</span>
											</div>
											<div class="replayCount_div">
												<span>{{item3.replyCount}}</span>
												<span>跟帖</span>
											</div>
										</a>
									</li>
								</ul>
							</div>
							<!--体育---------------------------------------------------------------------------------------------->
							<div id="item4mobile" class="mui-slider-item mui-control-content">
								<div id="slider" class="mui-slider" ng-controller="headCon4">
									<div class="mui-slider-group mui-slider-loop">
										<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
										<div class="mui-slider-item mui-slider-item-duplicate">
											<a href="#">
												<img ng-src="{{first.imgsrc}}">
											</a>
										</div>
										<!-- 第一张 -->
										<div class="mui-slider-item" ng-repeat="item4 in headArr4">
											<a href="#">
												<img ng-src="{{item4.imgsrc}}">
												<h5>{{item4.title}}</h5>
											</a>
										</div>

										<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
										<div class="mui-slider-item mui-slider-item-duplicate">
											<a href="#">
												<img ng-src="{{last.imgsrc}}">
											</a>
										</div>
									</div>
									<div class="mui-slider-indicator">
										<div ng-class="{true:'mui-indicator mui-active', false:'mui-indicator'}[$index == 0]" ng-repeat="item4 in headArr4 track by $index"></div>
									</div>
								</div>
								<ul class="homePage_ul" ng-controller="homePageCon4">
									<li style="position:relative; border-bottom: 1px solid gainsboro; margin-top: 5px;" ng-repeat="item4 in arr4">
										<a style="color: black;" ng-href="{{item4.url}}">
											<img style="width: 33.091787%; height: 13.994565%;" ng-src="{{item4.imgsrc}}" />
											<div class="homePage_a_span">
												<span>{{item4.title}}</span>
											</div>
											<div class="replayCount_div">
												<span>{{item4.replyCount}}</span>
												<span>跟帖</span>
											</div>
										</a>
									</li>
								</ul>
							</div>
							<!--军事----------------------------------------------------------------------------------------------->
							<div id="item5mobile" class="mui-slider-item mui-control-content">
								<div id="slider" class="mui-slider" ng-controller="headCon5">
									<div class="mui-slider-group mui-slider-loop">
										<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
										<div class="mui-slider-item mui-slider-item-duplicate">
											<a href="#">
												<img ng-src="{{first.imgsrc}}">
											</a>
										</div>
										<!-- 第一张 -->
										<div class="mui-slider-item" ng-repeat="item5 in headArr5">
											<a href="#">
												<img ng-src="{{item5.imgsrc}}">
												<h5>{{item5.title}}</h5>
											</a>
										</div>

										<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
										<div class="mui-slider-item mui-slider-item-duplicate">
											<a href="#">
												<img ng-src="{{last.imgsrc}}">
											</a>
										</div>
									</div>
									<div class="mui-slider-indicator">
										<div ng-class="{true:'mui-indicator mui-active', false:'mui-indicator'}[$index == 0]" ng-repeat="item5 in headArr5 track by $index"></div>
									</div>
								</div>
								<ul class="homePage_ul" ng-controller="homePageCon5">
									<li style="position:relative; border-bottom: 1px solid gainsboro; margin-top: 5px;" ng-repeat="item5 in arr5">
										<a style="color: black;" ng-href="{{item5.url}}">
											<img style="width: 33.091787%; height: 13.994565%;" ng-src="{{item5.imgsrc}}" />
											<div class="homePage_a_span">
												<span>{{item5.title}}</span>
											</div>
											<div class="replayCount_div">
												<span>{{item5.replyCount}}</span>
												<span>跟帖</span>
											</div>
										</a>
									</li>
								</ul>
							</div>
							<!--历史----------------------------------------------------------------------------------------------->
							<div id="item6mobile" class="mui-slider-item mui-control-content">
								<div id="slider" class="mui-slider" ng-controller="headCon6">
									<div class="mui-slider-group mui-slider-loop">
										<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
										<div class="mui-slider-item mui-slider-item-duplicate">
											<a href="#">
												<img ng-src="{{first.imgsrc}}">
											</a>
										</div>
										<!-- 第一张 -->
										<div class="mui-slider-item" ng-repeat="item6 in headArr6">
											<a href="#">
												<img ng-src="{{item6.imgsrc}}">
												<h5>{{item6.title}}</h5>
											</a>
										</div>

										<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
										<div class="mui-slider-item mui-slider-item-duplicate">
											<a href="#">
												<img ng-src="{{last.imgsrc}}">
											</a>
										</div>
									</div>
									<div class="mui-slider-indicator">
										<div ng-class="{true:'mui-indicator mui-active', false:'mui-indicator'}[$index == 0]" ng-repeat="item6 in headArr6 track by $index"></div>
									</div>
								</div>
								<ul class="homePage_ul" ng-controller="homePageCon6">
									<li style="position:relative; border-bottom: 1px solid gainsboro; margin-top: 5px;" ng-repeat="item6 in arr6">
										<a style="color: black;" ng-href="{{item6.url}}">
											<img style="width: 33.091787%; height: 13.994565%;" ng-src="{{item6.imgsrc}}" />
											<div class="homePage_a_span">
												<span>{{item6.title}}</span>
											</div>
											<div class="replayCount_div">
												<span>{{item6.replyCount}}</span>
												<span>跟帖</span>
											</div>
										</a>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>

			<!--tabbar2-->
			<div id="tabbar-with-chat" class="mui-control-content mui-active">
				<!--tabber2:热门---header------------------------------------------------------------->
				<div class="header_nav_title">
					<div class="tabber_header_nav_title">
						<span>热门</span>
					</div>
				</div>
				<div class="zhan_di_fang"></div>
				
				<div id="slider" class="mui-slider" ng-controller="headConT2">

					<div class="mui-slider-group mui-slider-loop">
						 <!--额外增加的一个节点(循环轮播：第一个节点是最后一张轮播)--> 
						<div class="mui-slider-item mui-slider-item-duplicate">
							<a href="#">
								<img ng-src="{{first.imgsrc}}">
							</a>
						</div>
						 <!--第一张--> 
						<div class="mui-slider-item" ng-repeat="itemT2 in headArrT2">
							<a href="#">
								<img ng-src="{{itemT2.imgsrc}}">
								<h5>{{itemT2.title}}</h5>
							</a>
						</div>

						 <!--额外增加的一个节点(循环轮播：最后一个节点是第一张轮播)--> 
						<div class="mui-slider-item mui-slider-item-duplicate">
							<a href="#">
								<img ng-src="{{last.imgsrc}}">
							</a>
						</div>
					</div>
					<div class="mui-slider-indicator">
						<div ng-class="{true:'mui-indicator mui-active', false:'mui-indicator'}[$index == 0]" ng-repeat="itemT2 in headArrT2 track by $index"></div>
					</div>
				</div>
				<div class="yugao_span">
					<div class="flexslider" ng-controller="myYuGao" style="width:100%; float: right;">
						<ul class="slides" style="position: absolute;top: 0px; left: 60px; z-index: 1000000;">
							<li class="mui-slider-item " ng-repeat="itemT2 in yuGaoArr">
								<span>{{itemT2.roomName}}</span>
							</li>
						</ul>
					</div>
					<div class="yuGao">
						<span>预告 / </span>
					</div>
				</div>	
				<ul class="homePage_ul" ng-controller="homePageConT2">
					<li style="position:relative; margin-top: 5px;" ng-repeat="itemT2 in arrT2">
						<a style="color: black;" ng-href="{{itemT2.url}}">
							<img style="width: 100%;" ng-src="{{itemT2.image}}" />
							<div class="tabber2_a_span">
								<span>{{itemT2.roomName}}</span>
							</div>
							<div class="roomId_div">
								<div style="background-color: rgb(244,48,48); width: 30px; text-align: center; float: left;">
									<span style="border: 1px;">直播</span>
								</div>
								<div style="width: 70px; height: 20px; background-color: black; text-align: center; opacity: 0.4; float: right;">
									<span>{{itemT2.roomId}}</span>
									<span>参与</span>
								</div>
							</div>
						</a>
					</li>
				</ul>
			</div>
			<!--tabbar3-->
			<div ng-include="'Controller/Topic.html'" id="tabbar-with-contact" class="mui-control-content"></div>
			<!--tabbar4-->
			<div ng-include="'Controller/Setting.html'" id="tabbar-with-map" class="mui-control-content"></div>
		</div>
	</body>
	<script src="js/mui.min.js"></script>
	<script type="text/javascript">
		mui.init()
	</script>
	<script src="js/touTiao.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/jingXuan.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/yuLe.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/tiYu.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/junShi.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/liShi.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/tabber2.js" type="text/javascript" charset="utf-8"></script>

	<script type="text/javascript">
		var zhiBo = document.getElementById("header_nav_img");
		var bianSe = document.getElementById("bianSe");
		var buBianSe = document.getElementById("buBianSe");
		zhiBo.addEventListener("touchstart", function() {
				bianSe.className = "mui-tab-item mui-active";
				buBianSe.className = "mui-tab-item";
		})
	</script>
	<script type="text/javascript">
		$(function() { 
		    $(".flexslider").flexslider({
		    		direction: "vertical",
		    		animationLoop:"true",
		    		animation:"slide",
		    		slideshowSpeed:"4000"
		    });
		});   
	</script>

</html>